// 游戏详情页面
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class GameDetailPage extends StatefulWidget {
  @override
  GameDetailPageState createState() => new GameDetailPageState();
}

class GameDetailPageState extends State<GameDetailPage> with SingleTickerProviderStateMixin {
  var _controller;
  List<Tab> tabs = [
    Tab(
      text: "详情",
    ),
    Tab(
      text: "攻略",
    ),
    Tab(
      text: "礼包",
    ),
  ];

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
    return Scaffold(
        backgroundColor: Colors.white,
        body:Container(
            width: double.infinity,
            decoration: BoxDecoration(
              image: new DecorationImage(
                image: new NetworkImage(
                    'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_bg_url.jpg'),
                fit: BoxFit.cover,
              ),
            ),
            child: Stack(
              children: <Widget>[
                SingleChildScrollView(
                  child: Container(
                    // color: Colors.red,
                    padding: EdgeInsets.only(top:1.wp),
                    child: Column(
                      children: <Widget>[
                        detailHead(),
                        detailMiddle(),
                      ],
                    ),
                  ),
                ),
              ],
            ))
    );
  }

  // 详情头部
  Widget detailHead() {
    return Container(
      // color: Colors.white,
      padding: EdgeInsets.fromLTRB(15, 10, 15, 0),
      child: Row(
        children: <Widget>[
          Image(
            image: NetworkImage("https://nie.res.netease.com/r/pic/20200603/dbdda171-4911-4cd5-b3d5-dc5cf3bc928e.png"),
            width: 150.w,
          ),
          Container(
            padding: EdgeInsets.only(left: 18.0),
            // color: Colors.red,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(bottom: 13.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text("猫和老鼠", style: TextStyle(color: Colors.white, fontSize: 18, height: 1.2)),
                      Text("这将是一场15V15的史诗级MOBA",
                          style: TextStyle(
                            color: Color(0xffeeeeee),
                            fontSize: 10,
                          )),
                    ],
                  ),
                ),
                Text("策略 | 500MB", style: TextStyle(color: Color(0xffeeeeee), fontSize: 10)),
                Container(
                  child: Row(
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.only(right: 5.0),
                        child: Text("4.5",
                            style: TextStyle(
                              color: Colors.white,
                            )),
                      ),
                    ],
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  // 详情中部
  Widget detailMiddle() {
    List<Widget> tabView = [
      tabWidget1(),
      tabWidget2(),
      tabWidget3(),
    ];
    return Container(
      height: 300,
      child: Column(
        children: <Widget>[
          Container(
            child: TabBar(
              controller: _controller,
              // 配置控制器,
              unselectedLabelColor: Colors.white,
              labelColor: Colors.white,
              // labelColor: Color(0xff561875),
              indicatorSize: TabBarIndicatorSize.label,
              tabs: tabs.map((item) {
                return item;
              }).toList(),
              labelStyle: TextStyle(height: 3),
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _controller,
              children: tabView.map((item) {
                return item;
              }).toList(),
            ),
          )
        ],
      ),
    );
  }

  // tab1对应的页面
  Widget tabWidget1() {
    List banners = [
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_1.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_2.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_3.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_4.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_5.jpg',
    ];

    List<Widget> bannerList = [];

    banners.asMap().forEach((index, item) {
      bannerList.add(GestureDetector(
        child: Container(
          child: Image(
            image: NetworkImage(item),
            width: .4.wp,
          ),
        ),
      ));
    });
    // physics: new NeverScrollableScrollPhysics(),
    return Container(
      color: Colors.green,
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              // padding: const EdgeInsets.all(0),
              children: bannerList,
            ),
          )
        ],
      ),
    );
  }

  // tab2对应的页面
  Widget tabWidget2() {
    List banners = [
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_1.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_2.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_3.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_4.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_5.jpg',
    ];

    List<Widget> bannerList = [];

    banners.asMap().forEach((index, item) {
      bannerList.add(GestureDetector(
        child: Container(
          child: Image(
            image: NetworkImage(item),
            width: .4.wp,
          ),
        ),
      ));
    });
    // physics: new NeverScrollableScrollPhysics(),
    return Container(
      color: Colors.green,
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              padding: const EdgeInsets.all(15.0),
              children: bannerList,
            ),
          )
        ],
      ),
    );
  }

  // tab3对应的页面
  Widget tabWidget3() {
    List banners = [
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_1.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_2.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_3.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_4.jpg',
      'https://app-1300876621.cos.ap-guangzhou.myqcloud.com/Web/www/game_icon/web_387_banner_url_5.jpg',
    ];

    List<Widget> bannerList = [];

    banners.asMap().forEach((index, item) {
      bannerList.add(GestureDetector(
        child: Container(
          child: Image(
            image: NetworkImage(item),
            width: .4.wp,
          ),
        ),
      ));
    });
    // physics: new NeverScrollableScrollPhysics(),
    return Container(
      color: Colors.green,
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              padding: const EdgeInsets.all(15.0),
              children: bannerList,
            ),
          )
        ],
      ),
    );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = TabController(
      length: tabs.length,
      vsync: this, //动画效果的异步处理，默认格式，背下来即可
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  void didUpdateWidget(GameDetailPage oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }
}
